<template>
  <div class="addCar">
      <div class="addCarHead">
      	  <x-header :title="titleVal" :left-options="{backText:''}" class='whiteHeader'></x-header>
      </div>
  	  <div class="carMess">
  	  <mt-index-list>
        <div class="hotCarMess">
          <h1>热门车型</h1>
          <div class="allHotCar">
            <div class="carItem" v-for='item in hotCarMess.RESULT_DATA' @click='getCarSet(item)'>
              <img :src="hotCarMess.CAR_BRAND_URL+item.LOGO" alt="" />
              <span>{{item.CNNAME}}</span>
            </div>
          </div>
        </div>
			  <mt-index-section :index="keys" v-for="(item,keys) in carItem" :key='keys' class='brandName'>

          <mt-cell :title='items.CNNAME' v-for='(items,index) in item' :key='index' class='' @click.native='getCarSet(items)'>
			    	<img slot="icon" :src="allCarMess.CAR_BRAND_URL+items.LOGO" alt="" class="carLogo" />
			    </mt-cell>
			  </mt-index-section>
		   </mt-index-list>
  	  </div>
      <div class="set" v-if='showBrandV'>
        <img src="../../assets/image/address/right.png" alt="" class="closes" @click='closeSet'>
    	  <popup v-model='showBrandV' width='55%' position='right'>

          <div class="popup2">
            <div class="header">
              <img :src="allCarMess.CAR_BRAND_URL+carBrandMess.LOGO" alt="" />
              <span>{{carBrandMess.CNNAME}}</span>
            </div>
            <div class="setItem border-bottom" v-for='item in allCarSet' @click='showModel(item)'>
              <h1>{{item.CNNAME}}</h1>
            </div>
          </div>
        </popup>
      </div>
      <popup v-model='showModelV' width='100%' position='right'>
        <div class="popup2">
          <x-header :title="titleVal" :left-options="{backText:'',preventGoBack:true}" @click.native='close' class='whiteHeader'></x-header>
          <div class="allCarModel">
            <h1 v-for='item in allCarModel' class="border-bottom" @click='saveMess(item)'>{{item.CNNAME}}</h1>
          </div>
        </div>
      </popup>
  </div>
</template>

<script>
// 添加车辆模块
import {Popup,XHeader} from 'vux';
import { IndexList, IndexSection } from 'mint-ui';
import { getCookie } from '../../util/commonUtils';
export default {
  name:"addCar",
  // 数据
  data(){
    return{
    	showBrandV:false,//显示carBrand
    	showModelV:false, //显示carModel
    	titleVal:'选择品牌',
    	allCarMess:'',  //所有车辆信息
    	carItem:{},  //按字母分类车辆信息
      carBrandMess:'',//选择的carBrand信息
      carSetMess:'', //选择的carset信息
      hotCarMess:'',  //热门车辆信息
      allCarSet:'',//所有车型号信息
      allCarModel:'',  //所有车系信息
      brandId:'', //车品牌id
      setId:'', //车型id
      modelId:'',  //车系id
      carName:''  //选择车辆的信息
    }
  },
  components: {
    Popup,
    XHeader
  },
  // 计算属性
  computed:{
  },
  // 创建（实例创建完成）
  created(){
    //获取所有品牌的信息
    this.$vux.loading.show({
       text: ''
    });
  	this.$fetchPost('/Car/getCarBrand20.action').then(res=>{
        if(res.STATUS_CODE==1){
          this.allCarMess=res;
          this.$vux.loading.hide();
          localStorage.setItem('publicUrl',this.allCarMess.CAR_BRAND_URL);//图片的公共路径
          //将车辆安装字母分类
          for(let i=0;i<res.RESULT_DATA.length;i++){
          	if(this.carItem.hasOwnProperty(res.RESULT_DATA[i].INITIAL)){
          		this.carItem[res.RESULT_DATA[i].INITIAL].push(res.RESULT_DATA[i]);
          	}else{
              this.$set(this.carItem,res.RESULT_DATA[i].INITIAL,[res.RESULT_DATA[i]])
          	}
          }
        }
      },err=>{
        console.log(err);
      })
    //获取热门车辆
    this.$fetchPost('/CarBaseAction/getHotCarBrand.action').then(res=>{
        if(res.STATUS_CODE==1){
          this.hotCarMess=res;
        }
      },err=>{
        console.log(err);
      })
  },
  // el被创建，并挂载到实例上
  mounted(){


  },
  // 方法（实例中的方法）-----------
  methods:{
    //获取车的型号
     getCarSet(item){
     	this.showBrandV=true;
      this.carBrandMess=item;
      this.brandId=item.ID;
      this.carName=item.CNNAME+',';
      this.$fetchPost('/CarWeb/getCarSet20.action',{BRANDID:item.ID}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allCarSet=res.RESULT_DATA;
        }
      },err=>{
        console.log(err);
      })
     },
     //获取车款
     showModel(item){
     	this.showModelV=true;
     	this.titleVal='选择车系'
      this.carSetMess=item;
      this.setId=item.ID;
      this.carName+=item.CNNAME+',';
      this.$fetchPost('/CarWeb/getCarModel20.action',{SETID:item.ID}).then(res=>{
        if(res.STATUS_CODE==1){
          this.allCarModel=res.RESULT_DATA;
        }
      },err=>{
        console.log(err);
      })
     },
     //选择车款，保存选择的信息
     saveMess(item){
        let str=this.carBrandMess.CNNAME+' '+this.carSetMess.CNNAME+' '+item.CNNAME;
        this.modelId=item.ID
        this.carName+=item.CNNAME;
        let strs=this.carName.split(',')[0]+'_'+this.carName.split(',')[1]+'_'+this.carName.split(',')[2]
        let obj={};
        //添加车辆的车辆信息
        obj.carName=str;
        obj.carPublic=this.allCarMess.CAR_BRAND_URL;
        obj.BRAND_ID=this.brandId;
        obj.SET_ID=this.setId;
        obj.MODEL_ID=this.modelId;
        obj.CARBRAND_NAME=strs;
        obj.BRAND=this.carName.split(',')[0];
        obj.SET=this.carName.split(',')[1];
        obj.MODEL=this.carName.split(',')[2];
        obj.SICON=this.carBrandMess.LOGO;
        //编辑车辆时跳过来换车
        if(localStorage.getItem('editCar')){
          let editCar=JSON.parse(localStorage.getItem('editCar'));
          editCar.CARBRAND_ID=this.brandId;
          editCar.CARSET_ID=this.setId;
          editCar.CARMODEL_ID=this.brandId;
          editCar.BRAND=this.carName.split(',')[0];
          editCar.SET=this.carName.split(',')[1];
          editCar.MODEL=this.carName.split(',')[2];
          editCar.SICON=this.carBrandMess.LOGO;
          //localStorage.setItem('editCar',JSON.stringify(editCar));
          localStorage.setItem('editCar',JSON.stringify(editCar));
          this.$router.push('/myUpdateCar/'+editCar.LICENCE);
          return;
        }                     
     },
     //关闭车款弹框
     close(){
     	this.showModelV=false;
     },
     closeSet(){
      this.showBrandV=false;
     }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.addCar{
	width: 7.5rem;
	height: 100%;
  .set{
    position: absolute;
    top:0;
    left: 0;
    bottom:0;
    right: 0;
  }
  .addCarHead{
    width: 7.5rem;
    height: 0.8rem;
    position: fixed;
    top: 0;
  }
  .carLogo{
    margin-right: 0.15rem;
  }
	.carMess{
    height: 100%;
    padding-top: 0.8rem;
		.brandName{
			font-size: 0.3rem;
			text-align: left;
			text-indent: 0.1rem;
			img{
				width: 0.5rem;
				height: 0.5rem;
			}
			span{
				font-size: 0.25rem;
			}
		}

	}
  .closes{
      display: block;
      width: 0.8rem;
      height: 0.7rem;
      margin-left: -1.041667rem;
      position:absolute;
      top: 50%;
      left: 40%;
      margin-top: -0.5rem;
      z-index:999;
    }
  .popup2{
    background: #fff;
    min-height: 100%;
    .header{
      display: flex;
      padding: 0.2rem 0.2rem;
      border-bottom:1px solid #ccc;
      img{
        width: 0.7rem;
        height: 0.7rem;
        display: block;
      }
      span{
        line-height: 0.7rem;
        padding-left: 0.2rem;
        font-size: 0.4rem;
        font-weight: 400;
      }
    }
    .setItem{
      h1{
        font-size: 0.35rem;
        padding: 0.25rem 0rem 0.25rem 0.3rem;
        text-align: left;
      }
    }
    .allCarModel{
      h1{
        font-size: 0.34rem;
        height: 1rem;
        line-height: 1rem;
        padding-left: 0.2rem;
        text-align: left;
      }
    }
  }
	.hotCarMess{
    h1{
      font-size: 0.33rem;
      padding: 0.12rem 0.2rem;
      text-align: left;
      background: #fafafa;
    }
    .allHotCar{
      background: #fff;
      display: flex;
      flex-wrap:wrap;
      padding: .1rem 0rem 0.1rem 0;
      .carItem{
        width: 20%;
        min-width: 20%;
        margin-bottom: 0.1rem;
        img{
          width: 0.5rem;
          height: 0.5rem;
          display: block;
          margin: 0 auto;
        }
        span{
          display: block;
          padding: 0.1rem 0;
          font-size: 0.3rem;
          text-align: center;
        }
      }
    }
  }
}
</style>
